<template>
	<!-- 在此组件中 制作一个对话框 -->
	<el-dialog title="编辑角色" :visible.sync="dialogVisible" width="75%">
		<el-form ref="form" label-width="80px" style="padding: 20px; ">
					<el-form-item label="标题">
						<el-input v-model="form.title"></el-input>
					</el-form-item>
					<el-form-item label="作者/单位">
						<el-input v-model="form.author"></el-input>
					</el-form-item>
					<el-form-item label="描述">
						<el-input type="textarea" v-model="form.describes"></el-input>
					</el-form-item>
					<el-form-item label="事件类型" prop="eventType">
						<el-select v-model="form.eventType.id" placeholder="请选择事件类型" style="width: 100%;">
							<el-option :key="index" v-for="(eventType,index) in eventTypes" :label="eventType.name" :value="eventType.id"></el-option>
						</el-select>
					</el-form-item>
				
					<el-form-item label="封面/图片">
						<el-upload
						  class="avatar-uploader"
						  :action="backServer"
						  :headers="head" 
						  :show-file-list="false"
						  name="file"
						  :on-success="handleAvatarSuccess">
						  <img v-if="form.cover" :src="imgurl + form.cover" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					
					<el-form-item label="内容">
						<mavon-editor v-model="form.content" ref="md" @imgAdd="$imgAdd" @change="change" :codeStyle="codeStyle" style="width: 100%;" />
					</el-form-item>
				</el-form>
		<p slot="footer" class="dialog-footer" style="width: 100%;text-align: center;">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="updateEvent()">确定</el-button>
		</p>
	</el-dialog>
</template>

<script>
	export default{
		name:"UpdateRole",
		data() {
			return {
				codeStyle: 'vs2015', // 代码风格配色
				dialogVisible:false,
				backServer:this.$backServers + "/admin/eventCtl/upload",
				eventTypes:[],
				imgurl:this.$imgService,
				head:{
					token:window.sessionStorage.getItem("token"),
				},
				html: '',
				form:{
					id:"",
					title: '',
					author:'',
					cover: '',
					describes: '',
					content: '',
					eventType:{
						id:'',
					}
				}
			}
		},
		methods: {
			findEventById(id){
				/* 
				键值对形式传递:?id= id 
				可以直接传值 :/ + id 
				 */
				
				this.$http.get("admin/eventCtl/findEventById/" + id).then((resp)=>{
					if(resp.data.code == 200){
						console.log(resp.data);
						this.form.id=resp.data.data.id;
						this.form.title=resp.data.data.title;
						this.form.author=resp.data.data.author;
						this.form.describes = resp.data.data.describes;
						this.form.content = resp.data.data.content;
						this.form.eventType.id = resp.data.data.eventType.id;
						this.form.cover = resp.data.data.cover;
					}
				})
			},
			updateEvent(){
				this.$http.post("admin/eventCtl/updateEvent",this.form).then((resp)=>{
					if(resp.data.code == 200){
						this.$message({
							message: resp.data.message,
							type:'success'
						});
						this.dialogVisible=false;
						//location.reload();
						this.$router.go();
					}
					
				})
			},
			handleAvatarSuccess(res, file) {
				console.log(res.data);
			    this.form.cover = res.data;
			},
			//markdown渲染
			change(value, render) {
				// render 为 markdown 解析后的结果[html]
				this.html = render;
			},
			// 将图片上传到服务器，返回地址替换到md中
			// 绑定@imgAdd event
			// 绑定@imgAdd event
			$imgAdd(pos, $file) {
				// 封装数据
				var formData = new FormData()
				formData.append('file', $file)
				// 上传图片给后台
				this.$http.post('/admin/eventCtl/uploads', formData).then(res => {
					var url = this.imgurl + res.data.data;
					console.log(url);
					this.$refs.md.$img2Url(pos, url); //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
				});
			},
		},
		mounted(){
			this.$http.get("admin/eventTypeCtl/findEventTypeList").then((resp)=>{
				console.log(resp.data);
				this.eventTypes = resp.data.data;
			})
		}
			
	 } 
</script>

<style>
</style>
